<template>
  <div id="gs-first" ref="gsFirst" class="gs-first">
    <div class="title">三网融合网格</div>
    <div class="echart-bg">
      <div class="tip-num" style="left:9px;"> 
        {{gsfData.cgName}}<div><CountTo
                :startVal="startVal"
                :endVal="gsfData.cgNum"
                :duration="duration"
              />个</div>
      </div>
      <div class="tip-num" style="right:9px;"> {{gsfData.pgName}}<div>{{gsfData.pgNum}}个</div></div>
      <div class="tip-num" style="top:80px;left:50%;transform: translateX(-50%);">{{gsfData.tobaccoName}}<div>{{gsfData.tobaccoNum}}个</div></div>
      <img src="../../assets/regulation/grad-bg.png" class="grad-bg"/>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    gsfData:{}
  },
  data() {
    return {
      startVal:0,
      duration:3000
    };
  },
  components: {},
  mounted() {
   
  },
  beforeDestroy() {},
  methods: {
  },
};
</script>

<style lang="scss" scoped>
.gs-first{
    width:220px;
    height:158px;
    background:url(../../assets/regulation/su-bg.png) no-repeat;
    background-size:100% 100%;
    .title{
      width:100%;
      font-size:18px;
      color:#DCEFFF;
      text-align:center;
      padding-top:27px;
    }
    .echart-bg{
      width:100%;
      height:120px;
      position:relative;
      .grad-bg{
        position: absolute;
        top:12px;
        left:50%;
        transform: translateX(-50%);
        width:101px;
        height:65px;
      }
      .tip-num{
        text-align:left;
        font-size:12px;
        color:#fff;
        position: absolute;
        top:14px;
        line-height:1.1;
        div{
          color:#2DEFFF;
        }
      }
    }

}
</style>
